<template>
    <div>
        <el-form
            v-if="formData"
            ref="form"
            :model="formData"
            style="margin-right: 12px"
            label-width="82px"
        >
            <el-form-item
                v-if="typeof formData.name !== 'undefined' && formData.name !== null"
                label="字段名"
            >
                <el-input
                    v-model="formData.name"
                />
            </el-form-item>
            <el-form-item
                label="标题"
            >
                <el-input
                    v-model="formData.label"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.placeholder !== 'undefined'"
                label="提示内容"
            >
                <el-input
                    v-model="formData.placeholder"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.activeValue !== 'undefined'"
                label="开启"
            >
                <el-input
                    v-model="formData.activeValue"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.inactiveValue !== 'undefined'"
                label="关闭"
            >
                <el-input
                    v-model="formData.inactiveValue"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.rows !== 'undefined'"
                label="行数"
            >
                <el-input-number
                    v-model="formData.rows"
                    :min="1"
                />
            </el-form-item>
            <el-form-item
                label="是否禁用"
            >
                <el-switch
                    v-model="formData.disabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.readonly !== 'undefined'"
                label="是否只读"
            >
                <el-switch
                    v-model="formData.readonly"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.multiple !== 'undefined'"
                label="是否多选"
            >
                <el-switch
                    v-model="formData.multiple"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.multipleLimit !== 'undefined' && formData.multiple"
                label="多选个数"
            >
                <el-input-number
                    v-model="formData.multipleLimit"
                    :min="0"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.collapseTags !== 'undefined' && formData.multiple"
                label="显示值"
            >
                <el-switch
                    v-model="formData.collapseTags"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.showPassword !== 'undefined'"
                label="显示密码"
            >
                <el-switch
                    v-model="formData.showPassword"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.minlength !== 'undefined'"
                label="最小长度"
            >
                <el-input-number
                    v-model="formData.minlength"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.maxlength !== 'undefined'"
                label="最大长度"
            >
                <el-input-number
                    v-model="formData.maxlength"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.step !== 'undefined'"
                label="步长"
            >
                <el-input-number
                    v-model="formData.step"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.widthPx !== 'undefined'"
                label="宽度(px)"
            >
                <el-input-number
                    v-model="formData.widthPx"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.precision !== 'undefined'"
                label="精度"
            >
                <el-input-number
                    v-model="formData.precision"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.clearable !== 'undefined'"
                label="可清空"
            >
                <el-switch
                    v-model="formData.clearable"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.showToolTip !== 'undefined'"
                label="toolTip"
            >
                <el-switch
                    v-model="formData.showToolTip"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.showInput !== 'undefined'"
                label="输入框"
            >
                <el-switch
                    v-model="formData.showInput"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.showInputControls !== 'undefined' && formData.showInput"
                label="输入控制"
            >
                <el-switch
                    v-model="formData.showInputControls"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.controls !== 'undefined'"
                label="控制按钮"
            >
                <el-switch
                    v-model="formData.controls"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.border !== 'undefined'"
                label="显示边框"
            >
                <el-switch
                    v-model="formData.border"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <div v-if="typeof formData.options !== 'undefined'">
                <el-divider>选项</el-divider>
                <div
                    v-for="(option, i) in formData.options"
                    :key="i"
                    style="margin-bottom: 10px"
                >
                    <el-input
                        v-model="option.label"
                        placeholder="选项名"
                        style="width: 43%"
                    />
                    <el-input
                        v-model="option.value"
                        placeholder="选项值"
                        style="width: 43%; margin-left: 5px;"
                    />
                    <i
                        class="el-icon-circle-close el-red-close"
                        @click="removeOption(i)"
                    />
                </div>
                <el-button
                    plain
                    @click="insertOption"
                >
                    添加选项
                </el-button>
            </div>
            <el-form-item
                v-if="typeof formData.validateEvent !== 'undefined'"
                label="输入校验"
            >
                <el-switch
                    v-model="formData.validateEvent"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.plain !== 'undefined'"
                label="朴素按钮"
            >
                <el-switch
                    v-model="formData.plain"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.round !== 'undefined'"
                label="圆角按钮"
            >
                <el-switch
                    v-model="formData.round"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </el-form-item>
            <el-form-item
                v-if="typeof formData.buttonType !== 'undefined'"
                label="按钮类型"
            >
                <el-select-v2
                    v-model="formData.buttonType"
                    :options="options"
                    placeholder="按钮类型"
                    clearable
                    style="width: 100%"
                />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {mapState} from "vuex";
export default {
    name: "FormControlsSettings",
    data() {
        return {
            options: [
                {
                    value: '',
                    label: '默认'
                },
                {
                    value: 'primary',
                    label: '主要按钮'
                },
                {
                    value: 'success',
                    label: '成功按钮'
                },
                {
                    value: 'info',
                    label: '信息按钮'
                },
                {
                    value: 'warning',
                    label: '警告按钮'
                },
                {
                    value: 'danger',
                    label: '危险按钮'
                }
            ]
        }
    },
    computed: {
        ...mapState({
            formData: state => state.formControlsSettingData
        })
    },
    methods: {
        removeOption(i) {
            this.formData.options.splice(i, 1);
        },
        insertOption() {
            this.formData.options.push({
                label: '',
                value: ''
            });
        }
    }
}
</script>

<style scoped>
    .el-input-number {
        width: 98.5%;
    }
    .el-red-close {
        font-size: 22px;
        color: red;
        margin-left: 5px;
    }
</style>
